<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自助式分析系统-表选择</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/loading/css2.css">
    <link rel="stylesheet" href="/loading/style.css">
    <!-- 引入 layui.js -->
    <script src="/layui/layui.js"></script>
    <!-- 引入 jq.js -->
    <script src="/js/jquery.min.js"></script>

      <style>
        .width_box{
          width: 50vh !important;
        }
        #main{
          width: 100%;
          height: auto;
          margin: 10vh auto 0 auto;
          text-align: center;
        }
        #conn_btn{
          margin-left: 140px;
          width: 35vh;
        }
        span{
            cursor: pointer;
            font-weight: bolder;
            font-size: 18px;
        }
        .tb{
            margin: 10px;
        }
        .tb_box{
            width: 200px;
            height: 50px;
            display: inline;
            text-align: left;
        }
        table{
            margin: 0 auto;
        }
        td{
            text-align: left;
            margin: 5px;
        }
        .layui-input-block {
            margin-top: 20px;
            margin-left: -30px;
            min-height: 36px;
        }
        #confirm{
            margin-top: 20px;
        }
      </style>
</head>
<body>
    <div id="main">
        <h1 style="font-size: 35px;">选择表（小于等于{{file_limit|safe}}张）</h1>
        <br><br>
        <!-- 选择表 -->
        <form action="">
            <table>
                {% if data_len % 2 == 0 %}
                    {% for index in range(data_half) %}
                        <tr>
                            <td><span class="table_name">{{data[index * 2][0]|safe}}</span></td>
                            <td><input type="checkbox" id="{{data[index * 2][0]|safe}}" name="{{data[index * 2][0]|safe}}" value="{{data[index * 2][0]|safe}}" class="tb"></td>
                            <td>&emsp;</td>
                            <td><span class="table_name">{{data[index * 2 + 1][0]|safe}}</span></td>
                            <td><input type="checkbox" id="{{data[index * 2 + 1][0]|safe}}" name="{{data[index * 2 + 1][0]|safe}}" value="{{data[index * 2 + 1][0]|safe}}" class="tb"></td>
                        </tr>
                    {% endfor %}
                {% else %}
                    {% for index in range(data_half - 1) %}
                        <tr>
                            <td><span class="table_name">{{data[index * 2][0]|safe}}</span></td>
                            <td><input type="checkbox" id="{{data[index * 2][0]|safe}}" name="{{data[index * 2][0]|safe}}" value="{{data[index * 2][0]|safe}}" class="tb"></td>
                            <td>&emsp;</td>
                            <td><span class="table_name">{{data[index * 2 + 1][0]|safe}}</span></td>
                            <td><input type="checkbox" id="{{data[index * 2 + 1][0]|safe}}" name="{{data[index * 2 + 1][0]|safe}}" value="{{data[index * 2 + 1][0]|safe}}" class="tb"></td>
                        </tr>
                    {% endfor %}
                        <tr>
                            <td><span class="table_name">{{data[-1][0]|safe}}</span></td>
                            <td><input type="checkbox" id="{{data[-1][0]|safe}}" name="{{data[-1][0]|safe}}" value="{{data[-1][0]|safe}}" class="tb"></td>
                        </tr>
                {% endif %}
            </table>
        </form>
        <!-- 提交 -->
        <button type="button" class="layui-btn" id="confirm">确认</button>
        <br><br>
        <span style="color:red;" id="tips"></span>
    </div>

</body>
<script>
    var checked_count = 0, limit = {{file_limit|safe}};

    $(".tb").click(function(e){
        e.target.checked ? checked_count++ : checked_count--;
        if(checked_count > limit){
        e.target.checked=false;
        checked_count--;
        }
    })
    $(".table_name").click(function(){
        $("#"+$(this).text()).click();
    })

    $("#confirm").click(function(){
      $.ajax({
        type: "POST",
        url: "/select_table",
        dataType: "json",
        data: JSON.stringify({
            'table_name': $("form").serializeArray(),
        }),
        contentType: "application/json;charset=UTF-8",
        beforeSend:function(){
            //请求前的处理
            $('body').html("");
            $('body').html(`<div class="hexagon" aria-label="Animated hexagonal ripples">
        <div class="hexagon__group">
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
        </div>
        <div class="hexagon__group">
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
        </div>
        <div class="hexagon__group">
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
        </div>
        <div class="hexagon__group">
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
        </div>
        <div class="hexagon__group">
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
        </div>
        <div class="hexagon__group">
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
            <div class="hexagon__sector"></div>
        </div>
    </div>
    <p aria-label="Loading">载入中......</p>`);

        },
        success: function(result){
            if(result.status == "success"){
                window.close();
            }else{
                $("#tips").text("提交失败!");
            }
        }
      });
    });
</script>
</html>